/**
 * ExitLag Gaming Theme - Main JavaScript
 */

jQuery(document).ready(function($) {

    // Mobile Menu Toggle
    function toggleMobileMenu() {
        $('#mobileMenu').toggleClass('active');
    }

    // Expose function globally
    window.toggleMobileMenu = toggleMobileMenu;

    // Close mobile menu when clicking outside
    $(document).on('click', function(event) {
        const $mobileMenu = $('#mobileMenu');
        const $mobileMenuButton = $('.mobile-menu-button');

        if (!$mobileMenu.is(event.target) &&
            $mobileMenu.has(event.target).length === 0 &&
            !$mobileMenuButton.is(event.target) &&
            $mobileMenuButton.has(event.target).length === 0) {
            $mobileMenu.removeClass('active');
        }
    });

    // Smooth scrolling for anchor links
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        const target = $(this.getAttribute('href'));
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 80
            }, 800);
        }
    });

    // Parallax effect for hero background
    $(window).on('scroll', function() {
        const scrolled = $(this).scrollTop();
        $('.hero-bg-red, .hero-bg-purple').css({
            'transform': 'translateY(' + (scrolled * 0.5) + 'px)'
        });
    });

    // Game card hover effects with jQuery
    $('.game-card').hover(
        function() {
            $(this).css('transform', 'scale(1.05)');
        },
        function() {
            $(this).css('transform', 'scale(1)');
        }
    );

    // Animate elements on scroll
    function animateOnScroll() {
        $('.ambassador-card, .feature-card, .game-card').each(function() {
            const elementTop = $(this).offset().top;
            const elementBottom = elementTop + $(this).outerHeight();
            const viewportTop = $(window).scrollTop();
            const viewportBottom = viewportTop + $(window).height();

            if (elementBottom > viewportTop && elementTop < viewportBottom) {
                $(this).addClass('animated');
            }
        });
    }

    // Add CSS for animations
    $('<style>')
        .prop('type', 'text/css')
        .html(`
            .ambassador-card, .feature-card, .game-card {
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.6s ease, transform 0.6s ease;
            }
            .ambassador-card.animated, .feature-card.animated, .game-card.animated {
                opacity: 1;
                transform: translateY(0);
            }
        `)
        .appendTo('head');

    // Initial animation check
    animateOnScroll();

    // Animation on scroll
    $(window).on('scroll', animateOnScroll);

    // Performance comparison toggle animation
    $('.performance-toggle').on('click', function() {
        const $overlay = $(this).closest('.performance-overlay');
        const $stats = $overlay.find('.performance-stat');

        // Toggle between on/off states
        if ($overlay.hasClass('off')) {
            $overlay.removeClass('off');
            $(this).removeClass('off');
            $stats.removeClass('bad').addClass('good');
            $stats.find('p:last-child').text(function(i) {
                return i === 0 ? '12ms' : '130';
            });
        } else {
            $overlay.addClass('off');
            $(this).addClass('off');
            $stats.removeClass('good').addClass('bad');
            $stats.find('p:last-child').text(function(i) {
                return i === 0 ? '87ms' : '68';
            });
        }
    });

    // Add loading animation for CTA buttons
    $('.btn-primary, .btn-dark').on('click', function(e) {
        const $btn = $(this);
        const originalText = $btn.text();

        // Don't prevent default for actual links
        if ($btn.attr('href') && $btn.attr('href') !== '#' && !$btn.attr('href').startsWith('#')) {
            return;
        }

        e.preventDefault();

        $btn.addClass('loading').text('Loading...');

        setTimeout(function() {
            $btn.removeClass('loading').text(originalText);
        }, 2000);
    });

    // Add loading styles
    $('<style>')
        .prop('type', 'text/css')
        .html(`
            .btn.loading {
                pointer-events: none;
                opacity: 0.7;
                cursor: not-allowed;
            }
            .btn.loading::after {
                content: '';
                display: inline-block;
                width: 12px;
                height: 12px;
                border: 2px solid transparent;
                border-top: 2px solid currentColor;
                border-radius: 50%;
                animation: spin 1s linear infinite;
                margin-left: 8px;
            }
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
        `)
        .appendTo('head');

    // Pricing card rotation effect
    $('.pricing-card').hover(
        function() {
            $(this).css('transform', $(this).css('transform') + ' scale(1.05)');
        },
        function() {
            const rotation = $(this).index() === 0 ? 'rotate(-5deg)' :
                           $(this).index() === 1 ? 'rotate(2deg) scale(1.1)' :
                           'rotate(5deg)';
            $(this).css('transform', rotation);
        }
    );

    // Feature cards stagger animation
    $('.feature-card').each(function(index) {
        $(this).css('animation-delay', (index * 0.1) + 's');
    });

    // Ambassador social links hover effect
    $('.ambassador-socials a').hover(
        function() {
            $(this).css('transform', 'scale(1.2)');
        },
        function() {
            $(this).css('transform', 'scale(1)');
        }
    );

    // Add pulse animation to connection badge
    setInterval(function() {
        $('.connection-badge').fadeOut(500).fadeIn(500);
    }, 3000);

    // Initialize tooltips for social icons
    $('.social-icons a, .ambassador-socials a').each(function() {
        const platform = $(this).attr('aria-label') || 'Social Media';
        $(this).attr('title', `Follow us on ${platform}`);
    });

    // Custom cursor effect for interactive elements
    $('.btn, .game-card, .ambassador-card').on('mouseenter', function() {
        $('body').css('cursor', 'pointer');
    }).on('mouseleave', function() {
        $('body').css('cursor', 'default');
    });

    // Performance metrics counter animation
    function animateCounters() {
        $('.stat-number').each(function() {
            const $this = $(this);
            const text = $this.text();

            if (text.includes('M+') || text.includes('K+')) {
                const number = parseInt(text.replace(/[^\d]/g, ''));
                const suffix = text.replace(/[\d]/g, '');

                $this.text('0' + suffix);

                $({ counter: 0 }).animate({ counter: number }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function() {
                        $this.text(Math.ceil(this.counter) + suffix);
                    }
                });
            }
        });
    }

    // Trigger counter animation when stats section is visible
    let countersAnimated = false;
    $(window).on('scroll', function() {
        if (!countersAnimated) {
            const $statsSection = $('.stats-section');
            if ($statsSection.length) {
                const elementTop = $statsSection.offset().top;
                const viewportBottom = $(window).scrollTop() + $(window).height();

                if (viewportBottom > elementTop) {
                    animateCounters();
                    countersAnimated = true;
                }
            }
        }
    });

    // Add accessibility improvements
    $('.mobile-menu-button').attr('aria-label', 'Toggle mobile menu');
    $('.mobile-menu').attr('aria-hidden', 'true');

    $('.mobile-menu-button').on('click', function() {
        const isActive = $('#mobileMenu').hasClass('active');
        $('.mobile-menu').attr('aria-hidden', !isActive);
    });

    // Keyboard navigation for mobile menu
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape') {
            $('#mobileMenu').removeClass('active');
            $('.mobile-menu').attr('aria-hidden', 'true');
        }
    });

    console.log('ExitLag Gaming Theme loaded successfully!');
});